<template>
    <view class="search-page">
        <scroll-view scroll-x>
            <view class="goods-wrap">
                <view class="goods-item" v-for="(g, i) in list" :key="i">
                    <sp-goods-card :goods="g"></sp-goods-card>
                </view>
            </view>
        </scroll-view>
        <view class="loadAllTip" v-if="!query.isNext">已经到底了~</view>
    </view>
</template>
<script setup lang="ts">
import { ref , reactive } from "vue";
import { post } from "@/libs/request"
import { onShow,onPullDownRefresh } from "@dcloudio/uni-app";
const query = reactive({
    pageIndex:1,
    pageSize:10,
    isNext:true
})
const params = reactive({
    isNew:1
})
const list = ref<any>([]);
/**
 * 获取商品
 */
const getGoodsList = ()=>{
    post("goods/paginate",query,params).then((res)=>{
        if(res.errCode==0){
            list.value = list.value.concat(res.data);+
            query.pageIndex++;
            if(list.value.length >= res.page.total){
                query.isNext = false;
            }
        }
    })
}
const reload = async()=>{
    list.value = [];
    query.pageIndex = 1;
    query.isNext = true;
    await getGoodsList();
}
onShow(async()=>{
    await getGoodsList();
})
onPullDownRefresh(async ()=>{
    await reload();
    uni.stopPullDownRefresh();
})
</script>
<style scoped lang="less">
.search-page{
    position: relative;
    min-height: 100vh;
    background: #F8F8F8;
    .goods-wrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0 24rpx;

        .goods-item {
            width: 346rpx;
            margin-bottom: 20rpx;
        }

        :deep(.goods-card--col .goods-card-cover) {
            width: 100%;
            height: 320rpx;
            border-radius: 15rpx;
            margin: 0;
        }
    }
    .loadAllTip{
        text-align:center;
        padding: 0 0;
        font-size: 26rpx;
        color:#666;
    }
}
</style>